從頭開始的Javascript 入門 -localStorage day9

localStorage的的使用方法

localStorage的方法非常简单，就是基本的增删查：

1. getItem(name)：指定根據名字的name電子雜誌對應的值。
2. setItem(name, value)：指定為的name設置一個對應的值。
3. removeItem(name)：由刪除name指定的名值對。

想要修改某項的話，用直接setItem方法重新設置值即可。

由於每個項目都是作為屬性存儲在localStorage的對象上，所以可以通過點語法或者方括號語法訪問屬性來讀取中值，設置也一樣，如下：

//使用方法存儲數據
localStorage.setItem（'name'，'Nicholoas'）;
//使用屬性存儲數據
localStorage.book = 'Pro JS' ;
//使用方法讀取數據
var name = localStorage.getItem（'name'）;
//使用屬性讀取數據
var book = localStorage.book;

不過，還是建議大家使用方法而不是屬性來訪問數據，以免某個鍵會意外重寫該對象上已經存在的對象。

localStorage的的優缺點

瀏覽器對的localStorage的大小限制是5MB（每個來源），比餅乾的大了不少，基本可以滿足日常需求了。

localStorage的只能存儲字符串，非字符串的數據在存儲之前會被轉換成字符串。所以在存儲一些複雜數據類型時可能有些麻煩，的通常做法的英文先使用JSON.stringfy()方法將其轉換為字符串後存儲，時使用後再取出使用JSON.parse()方法進行還原。

//存儲用戶信息 
var user = {
  名字：'約翰'，
  id：'321456'，
  isVIP：是的，
  ARR：[ 3，2，1 ]，
};
var str = JSON .stringfy（user）;
localStorage.setItem（'userInfo'，str）;
//提取用戶信息
var infoStr = localStorage.getItem（'userInfo'）;
var info = JSON .parse（infoStr）;

sessionStorage 和sessionStorage 是HTML5 新增的兩個特性，這兩個特性主要是用來作為會話存儲和本地存儲來使用的，解決了cookie 存儲空間不足的問題；

sessionStorage

屬性允許你訪問一個session Storage 對象，用於存儲當前會話的數據，存儲在sessionStorage 裡面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，並且重新加載或恢復頁面仍會保持原來的頁面會話。

localStorage

屬性允許你訪問一個Document 源(origin)的對象Storage 用於存儲當前源的數據，除非用戶人為清除(調用localStorage api 或則清除瀏覽器數據)， 否則存儲在localStorage 的數據將被長期保留。

• localStorage: 在同一個瀏覽器內，同源文檔之間共享localStorage 數據，可以互相讀取、覆蓋、清除(同瀏覽器限制、同源限制)

• sessionStorage: 與localStorage 一樣需要同一瀏覽器同源文檔這一條件。除此之外sessionStorage 的作用域還被限定在了窗口中，也就是說，只有同一瀏覽器、同一窗口的同源文檔才能共享數據(同瀏覽器限制、同源限制、同標籤頁限制)